<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.6/lib/theme-chalk/index.css">
  <!-- import Vue before Element -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<div id="app">
  <el-row>
    <el-button @click="sendBase">基本使用</el-button>
    <el-button type="danger">危险按钮</el-button>
  </el-row>

  <el-button @click="visible = true">Button</el-button>
  <el-dialog :visible.sync="visible" title="Hello world">
    <p>Try Element</p>
  </el-dialog>
</div>
</body>

<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui@2.15.6/lib/index.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.25.0/axios.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#app',
    data: function () {
      return {visible: false}
    },
    methods: {
      // 发送基本请求
      sendBase() {
        // 默认配置
        // Add a request interceptor
        axios.interceptors.request.use(function (config) {
          // Do something before request is sent
          console.log('请求拦截-成功')
          return config;
        }, function (error) {
          // Do something with request error
          console.log('请求拦截器-失败')
          return Promise.reject(error);
        });

        //  Add a response interceptor
        axios.interceptors.response.use(function (response) {
          // Any status code that lie within the range of 2xx cause this function to trigger
          // Do something with response data
          console.log('响应拦截-成功')
          return response.data;
        }, function (error) {
          // Any status codes that falls outside the range of 2xx cause this function to trigger
          // Do something with response error
          console.log('响应拦截-失败')
          return Promise.reject(error);
        });

        axios.defaults.method = 'GET'
        axios.defaults.baseURL = 'http://localhost:3000'
        axios({
          url: '/posts/1'
        }).then(respose => {
          console.log('调用返回结果', respose)
        })
      },
    }
  })
</script>
</html>
